<!-- 工具调用状态指示器组件 -->
<template>
	<div v-if="showToolLoading" class="tool-loading-indicator" :class="toolThemeClass">
		<a-spin size="small" />
		<span>{{ loadingText }}</span>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
	generating: boolean
	lastToolMessage: string
	isToolCalling: boolean
}

const props = defineProps<Props>()

// 是否显示工具调用加载状态
const showToolLoading = computed(() => {
	return props.isToolCalling && props.generating
})

// 根据最后的工具消息确定工具类型和主题
const toolThemeClass = computed(() => {
	if (props.lastToolMessage.includes('🗑️') || props.lastToolMessage.includes('删除文件')) {
		return 'theme-delete'
	} else if (props.lastToolMessage.includes('🗂️') || props.lastToolMessage.includes('读取目录')) {
		return 'theme-readdir'
	} else if (props.lastToolMessage.includes('🔧') && props.lastToolMessage.includes('修改文件')) {
		return 'theme-modify'
	} else if (props.lastToolMessage.includes('📖') || props.lastToolMessage.includes('读取文件')) {
		return 'theme-read'
	} else if (props.lastToolMessage.includes('✏️') || props.lastToolMessage.includes('写入文件')) {
		return 'theme-write'
	} else if (props.lastToolMessage.includes('🏁') || props.lastToolMessage.includes('退出工具调用')) {
		return 'theme-exit'
	} else if (props.lastToolMessage.includes('选择工具')) {
		return 'theme-selecting'
	} else {
		return 'theme-default'
	}
})

// 根据最后的工具消息生成加载文本
const loadingText = computed(() => {
	if (props.lastToolMessage.includes('选择工具')) {
		return '正在选择合适的工具...'
	} else if (props.lastToolMessage.includes('读取文件')) {
		return '正在读取文件...'
	} else if (props.lastToolMessage.includes('写入文件')) {
		return '正在写入文件...'
	} else if (props.lastToolMessage.includes('修改文件')) {
		return '正在修改文件...'
	} else if (props.lastToolMessage.includes('删除文件')) {
		return '正在删除文件...'
	} else if (props.lastToolMessage.includes('读取目录')) {
		return '正在读取目录...'
	} else if (props.lastToolMessage.includes('退出工具调用')) {
		return '正在退出工具调用...'
	} else {
		return '正在执行工具调用...'
	}
})
</script>

<style scoped lang="scss">
.tool-loading-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 8px;
	margin: 0 20px 12px 20px;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border: 1px solid;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		animation: shimmer 2s infinite;
	}

	// 选择工具主题 - 紫色
	&.theme-selecting {
		color: #667eea;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		border-color: rgba(102, 126, 234, 0.2);
	}

	// 删除文件主题 - 红色
	&.theme-delete {
		color: #ff6b6b;
		background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 87, 34, 0.1) 100%);
		border-color: rgba(255, 107, 107, 0.2);
	}

	// 读取目录主题 - 青色
	&.theme-readdir {
		color: #4ecdc4;
		background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(68, 160, 141, 0.1) 100%);
		border-color: rgba(78, 205, 196, 0.2);
	}

	// 修改文件主题 - 橙色
	&.theme-modify {
		color: #ffa726;
		background: linear-gradient(135deg, rgba(255, 167, 38, 0.1) 0%, rgba(251, 140, 0, 0.1) 100%);
		border-color: rgba(255, 167, 38, 0.2);
	}

	// 读取文件主题 - 蓝色
	&.theme-read {
		color: #42a5f5;
		background: linear-gradient(135deg, rgba(66, 165, 245, 0.1) 0%, rgba(30, 136, 229, 0.1) 100%);
		border-color: rgba(66, 165, 245, 0.2);
	}

	// 写入文件主题 - 绿色
	&.theme-write {
		color: #66bb6a;
		background: linear-gradient(135deg, rgba(102, 187, 106, 0.1) 0%, rgba(76, 175, 80, 0.1) 100%);
		border-color: rgba(102, 187, 106, 0.2);
	}

	// 退出工具主题 - 紫色
	&.theme-exit {
		color: #8e44ad;
		background: linear-gradient(135deg, rgba(142, 68, 173, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
		border-color: rgba(142, 68, 173, 0.2);
	}

	// 默认主题 - 青绿色
	&.theme-default {
		color: #11998e;
		background: linear-gradient(135deg, rgba(17, 153, 142, 0.1) 0%, rgba(56, 239, 125, 0.1) 100%);
		border-color: rgba(17, 153, 142, 0.2);
	}
}

@keyframes shimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}
</style>
